沉浸式阅读
Beta
转载

在CSS中的content属性的几种妙用和常规使用技巧

     订阅 CSS教程     2023-05-15     blog.51cto.com    网络转载    347    0    0    0    2023-05-15
学习要点:属性是CSS中一个非常有用的属性,可以用于插入生成内容,如在 ::before 和 ::after 伪元素中添加文本或图标。

Content 属性是 CSS 中一个非常有用的属性,可以用于插入生成内容,如在 ::before 和 ::after 伪元素中添加文本或图标。

Content 属性的特点:

Content 属性仅可用于 ::before 和 ::after 伪元素上,不能用于其他元素上。

Content 属性值可以是字符串、特殊字符、URL、计数器等,常用的字符串值包括文字、图标等等。

Content 属性不仅可以用于显示内容,也可以用于控制生成内容的样式和行为。

Content 属性的值可以是动态的,比如可以使用 attr() 函数将元素的属性值作为伪元素内容。

Content 属性可以与 :before 和 :after 伪元素的其他样式属性结合使用,比如 display、position、padding、border、background 等等。

Content 属性的值在页面上不会被选中、复制、粘贴,也不会对文档结构产生影响,仅仅是对生成的内容进行控制和定制。

Content 属性的使用可以让开发者在不改变 HTML 结构的情况下添加或修改一些内容,从而实现一些特殊的效果和功能。


以下是content属性的几种妙用和技巧:

1、插入文本

可以使用content属性在伪元素中插入文本,如下所示:

.example::before {
  content: "这是一段标题文字";
}

这个代码中,它会在.example 元素前插入文本“这是一段标题文字”。


2、插入图标

可以使用content属性在伪元素中插入图标,如下所示:

.example::before {
  content: url(icon.png);
}

这个代码中,它会在.example 元素前插入一个图标。


3、属性值计数器

可以使用content属性结合counter函数来创建属性值的计数器。


3.1 在每个列表项前显示一个数字:

html代码

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>


CSS代码

ol {
  counter-reset: item;
}
li::before {
  content: counter(item) ". ";
  counter-increment: item;
}


实测效果


3.2 定义计数器的初始值

html代码

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>


css代码

ol {
  counter-reset: item 3; 
}
li::before {
  content: counter(item) ". ";
  counter-increment: item;
}


实测效果

定义了初始值为 3 ,从 3 开始计数,依次为 4、5、6。不定义初始值的话,默认值为 0 ,如上一个例子。


4、引用其他元素的属性值

可以使用attr函数和content属性来引用其他元素的属性值,如下所示:

.example::before {
  content: attr(title);
}


这个代码中,它会在.example元素前插入一个文本,文本内容为.example元素的title属性的值。


5、给链接添加图标

html代码

<div>
  <a href="https://blog.51cto.com/liujueyi">我的51cto</a>
</div>


css代码

a[href^="https"]::after {
  content: url('51cto-logo.png');
}


实测效果

这个代码中,::after 伪元素会在 a 标签内部的文本前面插入一个外部链接图标。使用 " ^= " 选择器匹配 href 属性值以 https 开头的链接。


6、给某些元素添加额外信息

html代码

<a data-tooltip="我的51cto" href="https://blog.51cto.com/liujueyi">51cto</a>


css代码

a[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -50px;
  left: 0;
  background: black;
  color: white;
  padding: 5px 10px;
  border-radius: 2px;
}


实测效果

鼠标放到文字上,会弹出 tip 信息。


7、实现一些简单的动态效果

html代码

<button type="button"> 鼠标放上来看效果 </button>


css代码

button::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent red transparent;
  margin: 0 4px;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}
button:hover::after {
  transform: translateY(-3px);
}


实测效果

鼠标放上去,按钮中的小三角会有上移的效果。


8、实现响应式图片

.card::before {
  content: "";
  display: block;
  background-image: url("small-image.jpg");
  background-size: cover;
}

@media (min-width: 768px) {
  .card::before {
    background-image: url("large-image.jpg");
  }
}


根据屏幕大小的不同,改变 background-image 的值。

在移动端显示小图,在pc端展示大图。

注意:这种方法,只适合单张图片。


本文标题: 在CSS中的content属性的几种妙用和常规使用技巧

本文链接: https://www.mbkfw.com/course/1189.html (转载时请注明来源链接)

本文说明: 本文来源于网络转载,有问题请发送至: 邮箱/kf@dtmuban.com 进行修改或删除

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
本文标签: #html #前端开发 #伪元素
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈