CSS常用伪元素使用详解

首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after

1.::first-letter

选中元素的首字符，为其设置样式

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

</body>
</html>

2. ::first-line

选中元素的地一行

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>

3.::before和::after

::before和::after可在元素前后添加内容，使用十分灵活，没有做不到，只有想不到！！

需要注意的是： 1.::before和::after添加的内容都是放在该元素的子元素的最前面或者最后面的！

2.::before和::after下特有的content不会改变文档内容，仅作为一种渲染使用！

下面介绍::before和::after的三种用法

1）在元素的前面或者后面添加一些字符内容

<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"台词：";
}
</style>
</head>

<body>

<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>

</body>
</html>

2.将content的属性设置为空，把它做成一个内容很少的盒子

<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"";
width:12px;
height:12px;
display:inline-block;
background-color:red;
}
</style>
</head>

<body>

<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>

</body>
</html>

3.在元素之前或者之后插入非文本内容

插入一张图像：如下所示（图像大小按照自己的要求设置）

p:before
{
content:url(xxx.png);
}

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

p::after{
content:attr(href);
}

本博客由博主原创，如需转载需说明出处！谢谢支持！

CSS常用伪元素使用详解

猜你喜欢