问题
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.
回答2:
This is probably what you want,
To put an image to the left of your breadcrumb li links:
.breadcrumbs li a::before {
content: "";
display: block;
background: url('/img/breadcrumb-icon.png') no-repeat;
width: 20px;
height: 20px;
float: left; /*icon on the left*/
margin: 0 6px 0 0; /*margin on the right so there is a gap between your icon and link*/
}
If you want it on the other side try float:right;margin: 0 0 0 6px;
or use ::after
should get you part of the way
来源:https://stackoverflow.com/questions/22511499/add-html-tag-inside-css-content-property