content属性你深究过吗

发布时间:2019-02-22 作者:一点通


在平时开发中,我们经常会利用伪元素来实现一些CSS效果,主要是为了避免创建多余的元素,比如:

.box::before{
    display: block;
    content: '';
    width: 100px;
    height: 100px;
    border: #DDD 1px solid;
}

这样我们便创建了一个属于.box的伪元素,也许大家注意到了content这个属性,而且还是一个空的字符串,貌似没什么作用,但是如果你不加这个属性,你是看不到这个伪元素的。

CSS的content属性是用于在伪元素::before::after中插入内容

接下来我们就看看content主要可以设置哪些值

none、normal

当不设置content属性或者content的取值为nonenormal时,是不会产生该伪元素的。

文本

通常我们会将content的值设为一段文字

h1::before{
    content: '标题'
}

这个时候将会看到<h1>标签内容前面都会加上了标题俩字

如果是做一些CSS效果,比如加载动画,那么我们需要将content设置为空字符串

url(外部资源)

如果想在伪元素中插入一张图片呢?很简单

.box::before{
    content: url('http://domain.com/xxx.png');
}

attr

前面讲到过的attr属性,结合data-*就可以快速实现一个hover提示效果

<div class="tip" data-tip="提示"></div>

鼠标移到该元素上的时候给其伪元素的content设置自己的data-tip

.tip:hover::before{
    content: attr(data-tip);
}

当然你也可以通过其他方式来实现这样一个提示效果,但我相信attr+data-*一定是很简洁很巧妙很语义化的方案。要灵活选择最佳实践一定是基于对各种属性和语法的了解。

demo