How to mark the source and origin of CSS3 citations

I am almost going moldy staying at home due to the epidemic, so I turned on my computer and used my brain. Today I will share with you a method about the source and origin of CSS3 markup references.

The emergence of new technologies often means new improvements in productivity. With the popularity of HTML5 and CSS3, more and more new methods allow us to simply and easily solve things that used to be done with very complicated codes. For example, download and placeholder in HTML5, calculator and counter in CSS3 have greatly reduced the workload of us Web developers, because the emergence of these features saves us a lot of effort. Here, I will introduce to you a method of using the content and attr technology in CSS3 to cleverly mark the author of the quotation or the source of the quotation.

If you quote someone else in your article, or quote a passage from a book, you should indicate the person's name or the book's title after the quote. This is not only out of politeness, but also out of respect. Usually we use float:right to make the source appear in the lower right corner of the quotation. But the content and attr technology in CSS3 allows us to achieve it more cleverly. Below is the effect diagram achieved by CSS3.

HTML Code

It is said that Sanzang escorted the demon out of the cave, and Monk Sha approached and asked, "Master, come out, where is your brother?"

Bajie said, "He has a plan. He will definitely replace Master with someone else." Sanzang pointed at the demon and said, "

Your senior brother is in his belly. "Bajie laughed and said, "What are you doing in the stomach? Come out!"

The Monkey King shouted from inside, "Open your mouth and wait for me to come out!" The monster really opened its mouth. Walker changes

The little one was stuck in his throat and was about to come out, but he was afraid that he would bite him, so he took out the iron rod.

, blew a breath of fairy air and shouted: "Change!"

We noticed the cite attribute on the blockquote element. Rather than using a separate element to display the source, we take advantage of the properties of the blockquote itself. This is grammatically clearer and simpler, and semantically more meaningful.

CSS Code

Next we need to use a small piece of CSS to make the content in the cite attribute display in the appropriate place, which requires the use of content and attr in CSS3:

blockquote[cite]:after {

    background-color: #666666;

    border: 1px solid #000000;

    color: #EEEEEE;

    content: attr(cite);
    display: block;
    font-size: smaller;
    font-style: normal;
    padding: 0 0.2em;
      position: absolute;
    right: 0.5em;
    }

We actually use the :after pseudo-element to display the origin information. No additional web elements are added. Use absolute positioning to position it in the lower right corner, and it also shows a certain sense of hierarchy. Very beautiful.

Unless the requirements are particularly high, this method of showing the source or origin of the quotation is very effective. But there are also some impractical aspects, such as you need to add a link to the book. This usage is supported in modern browsers, including Firefox, Google Chrome, and Apple Chrome. IE9 fully supports this method.

Summarize

This concludes this article on clever ways to mark the origin and source of CSS3 references. For more relevant CSS3 reference and source content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!