CSS

CSS生成内容

字号+ 编辑: Snake 修订: Snake 来源: 慕课网 2023-09-09 我要说两句(0)

在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

CSS生成内容

在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现。

但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。

不过这个属性对于img和input元素不起作用。

content配合CSS的伪类或者伪元素,一般可以做以下四件事情:

功能功能说明
none不生成任何内容
attr插入标签属性值
url使用指定的绝对或相对地址插入一个外部资源(凸显、声频、视频或浏览器支持的其他任何资源)
string插入字符串

在CSS中有一种清除浮动的方法叫“clearfix”。

而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示:

.clearfix:before,
.clearfix:after {
    content:””;
    display:table;
}
.clearfix:after {
    clear:both;
    overflow:hidden;
}

上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。

假设我们有一个元素:

<a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后:

a:after {
    content:attr(title);
    color:#f00;
}

效果如下:

图片28.png

阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • 多个高度相同, 属性inline-block的div,有的div没有内容而有的div有内容,有内容的会下沉?

  • 让整个网页全局变成黑白色调的css代码

  • CSS3外轮廓属性

  • 自由缩放属性resize

我要说说
网上宾友点评