CSS伪元素:::before的用法

CSS教程

::before的用法:创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。

::before伪元素代码示例

使用 ::before 伪元素的一个简单示例就是用于加入引号。此处同时使用了 ::before 和¥来插入引用性文本。

1、h1::before{
content:”你好”;
display:inline-block;
width:20px;
height:20px;
border-radius:100px;
background-color:red;
}

2、ul.prices li::before{
content:”¥”;
font-weight:bold;
color:green;
}

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年9月30日

Previous Story

CSS教程

CSS伪元素:伪类和伪元素的区别

伪类和伪元素的区别:获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。

...

Next Story

CSS教程

CSS伪元素:::after的用法

::after的用法:用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

...