css-content

问题 In some template I see that an arrow that created with CSS. something like this: div:after{ content:"\f107"; } this code display an arrow like this : what is this code? where I can find more codes? 回答1: Using content property embeds a virtual content inside an element, it is used with a pseudo :before or :after , so if you use :before , the content will be embedded before. From MDN : The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an

问题 How can I display the "$" sign through CSS Content:" " I've tried all kinds of different codes. Putting just div.example {Content:"$1000";} displays on the site like "00". Trying to do this before resorting to Javascript. 回答1: .dollar:before { content: '$'; } 回答2: You can use the following code for displaying the dollar sign in the CSS content property div.example { content: "\0024"; } 回答3: There isn't quite enough HTML to go on, but to take a shot: The CSS property content is to be used with

问题 Lets demonstrate an example with simple HTML code like this: <div data-icon="\25B6">Title</div> I would like this element to have an prefix icon set by it's data attribute (data-icon) so I set CSS file like this: div:before { content: attr(data-icon); } My desired output of this example would look like this: ▶Title Instead of desired output all I can get is this: \25B6Title So my question is: what am I doing wrong / what am I missing? JSFiddle example: http://jsfiddle.net/Lqgr9zv6/ 回答1: CSS

问题 I'm looking for a way to add an HTML tag for CSS content property inside :after and :before . Unlike this question which only discusses adding symbols like < . What I'm trying to add is something like: .breadcrumbs li a:before { content: '<i class="icon"></i>'; } Is there any possible way to do that? 回答1: This is impossible. You cannot generate markup from CSS. It should also be unnecessary - stick your background image / icon font / whatever in the generated pseudo-element you have already.

问题 From what I understand, :before and :after inserts content before or after the indicated target. I'm not really sure what would be the purpose of this CSS snippet? *, *:before, *:after { -moz-box-sizing: border-box; } 回答1: That applies border-box sizing to all elements as well as any :before and :after pseudo-elements that they may generate. The *:before, *:after portion means the respective pseudo-elements of any element. Once you create specific :before / :after rules later in your

问题 Is there a way to inherit node value into content attribute? Like, if <h2/> tag value is set to "Random title", can I get this value inside content attribute in CSS? I've tried content: inherit; , but it doesn't seem to work. An example of my theory: HTML: <h2>Random title</h2> CSS: h2:after { content: inherit; /* should be "Random title" */ } Thanks in advance! 回答1: No, there's no way to do that. That's not what inherit is for. The closest you can get is this: <h2 data-title="Random title"

问题 I'm currently creating a html grid out of div s to display a characters attributes. Here is the DIV: <div class="grid attributes ng-scope"> <!-- ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-0 mental grid"> <h5 class="category-header ng-binding">mental</h5> <!-- ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-0 col-0-0 Intelligence

问题 I'm currently creating a html grid out of div s to display a characters attributes. Here is the DIV: <div class="grid attributes ng-scope"> <!-- ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-0 mental grid"> <h5 class="category-header ng-binding">mental</h5> <!-- ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-0 col-0-0 Intelligence

问题 The following example shows a box div with an :after content, which should be a separate block. div.box { background-color: #FAA; width: 10em; overflow: scroll; } div.box:after { content: "☑"; display: block; background-color: #AFA; width: 5em; overflow: auto; } <div class="box">x</div> But the after content is placed inside the scroll bars. My expectation was that it comes actually after the scrollable area. 回答1: The :after content comes within the scrollable area because even though the

问题 As you probably know, if you will to use :before and/or :after pseudoelements without setting text in it, you still have to declare content: ''; on them to make them visible. I just added the following to my base stylesheet : *:before, *:after { content: ''; } ...so I don't have to declare it anymore further. Apart from the fact the * selector is counter-performant, which I'm aware of (let's say the above is an example and I can find a better way to declare this, such as listing the tags