Home > Developer > Web Develop
Inserting content into the web, in the CSS2.1 era, relies on javascript for implementation. But after entering the CSS3 we can achieve by CSS3 pseudo-class ": Before", ": After" and CSS3 pseudo-element ":: Before", ":: After", the key is to rely on the "content" property in CSS3. This property, however, does not work for the img and input elements.
Content with CSS pseudo-class or pseudo-elements, generally can do the following four things:
Function |
Function description |
None |
Do not generate any content |
attr |
Insert Tag Property value |
Url |
Inserts an external resource (image, audio, video, or any other resource supported by the browser) using the specified absolute or relative address |
String |
Insert String |
Examples show:
There is a way to clear the float in CSS called "Clearfix". This "Clearfix" method uses "content", but only inserts a space here. As shown below:
. clearfix:before,.clearfix:after { content: ""; display:table;}. clearfix:after { clear:both; Overflow:hidden;}The above example is the most common and simplest, and let's look at a method for inserting element property values.
Suppose we have an element:
<a href= "# #" title= "I'm a Title property value, I'm stuck in your back" > I'm the element </a>
You can insert the "title" value of an element into the element's content after I am an element by using ": After" and "Content:attr (title)":
A:after { content:attr (title); Color: #f00;}The effect is as follows:
Example:
Page
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>CSS generated content</title><Linkhref= "Style.css"rel= "stylesheet"type= "Text/css"></Head><Body><H1>I am the title, insert the content in front of me</H1></Body></HTML>
Css
{ content:"I was added in"; color: red;}Effect
Welcome to the IT Exchange group: 123493055
"CSS"---: before:after generated content
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
