css3伪类怎么用
1、使用场景一:插入内容
假设我们有如下的HTML代码
<p>paragraph text</p>
我们可以用伪元素添加内容比如:
p:before { content: "this is "; font-weight: bold; font-style: italic; }
在浏览器中呈现的效果:
请记住,实际上这种做法是在内容之前或之后添加元素。它不是出现在所选元素旁边的东西,而是与其内容有关。
2、场景二:插入Icons图标
通过伪元素:before and :after 插入图标是非常流行的做法。因为我们可以给伪元素添加几乎任何CSS样式属性(常见的情况是:创建的伪元素是一个块并附加背景图像)(推荐学习:CSS视频教程)
比如我们给出一段HTML代码
<p>paragraph text</p>
通过伪元素方式添加icon图标
p:before { content: ""; display: block; background: url("icon.webp") no-repeat; width: 20px; height: 20px; float: left; margin: 0 6px 0 0; }
在浏览器中呈现的结果如下:
3、使用场景三:给链接添加额外的样式
有时候,将不同风格的链接指向外部资源是一种很好的做法。通过伪元素的方式,可以很容易地实现它。假设我们有以下几段文字:
<p>Krasimir Tsonev is <a href="">developer</a> who likes to write and <a href="">tweet</a>.</p>
我们可以在该链接之后添加一个小图标,指示它指向当前域外部的页面。
a { text-decoration: none; font-weight: bold; color: #000; } a:after { content: ""; display: inline-block; background: url("icon-external.webp") no-repeat top right; width: 14px; height: 12px; }
在浏览器中呈现的结果:
使用伪元素:before and :after 最大的好处是可以在不添加新的DOM节点的情况下对HTML进行样式设置。 CSS是前端控制视觉的工具,结合伪元素,可以轻松完成很多精巧的设计,好看的样式。
更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!
以上就是css3伪类怎么用的详细内容,更多请关注易知道|edz.cc其它相关文章!