Add HTML tag inside CSS Content property

拟墨画扇 提交于 2019-12-28 16:56:08

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!