首页 前端知识 CSS Content 属性的几种妙用和技巧

CSS Content 属性的几种妙用和技巧

2024-05-29 10:05:37 前端知识 前端哥 815 78 我要收藏

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

Content 属性的特点:

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

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

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

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

  • content属性可以与 :before:after 伪元素的其他样式属性结合使用,比如 displaypositionpaddingborderbackground 等等。

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

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

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

1、插入文本

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

html
<div class="example"></div>
css
.example::before {
  content: "这是一个栗子";
}
效果

这个代码中,它会在 .example 元素前插入文本“这是一个栗子”。

2、插入图标

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

html
<div class="example"></div>
css
.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; /* 定义起点为 3 */
}
li::before {
  content: counter(item) ". ";
  counter-increment: item;
}
效果

在这里插入图片描述

定义了初始值为 3 ,从 3 开始计数,依次为 4、5、6。不定义初始值的话,默认值为 0 ,如 #3.1。

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

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

html代码
<div class="example" title="csdn - 设计师工作日常"></div>
css代码
.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代码
<div class="tipbox">
	<a data-tooltip="设计师工作日常" href="https://blog.csdn.net/justliu1989">csdn</a>
</div>
css代码
.tipbox{
	width: 200px;
	height: 160px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
a[data-tooltip]:hover::before {
	content: attr(data-tooltip);
	position: absolute;
	top: 30px;
	left: 30px;
	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 的一些实用小技巧和小创意,可以帮助我们实现一些独特的效果。
如果你还知道一些更创意的用法,欢迎留言讨论。


[1] 阅读原文

大家好!我是 Just,这里是[ 设计师工作日常 ],求点赞求关注!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9898.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!