css学习--伪类before/after

最新推荐文章于 2024-05-10 00:53:46 发布

confiself

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量639

点赞数

分类专栏： js/css

本文链接：https://blog.csdn.net/u012599545/article/details/116137694

版权

js/css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。在html中不可见，只在css中可见

伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。

伪元素(双冒号)，css3中的伪类是（单冒号）

content为要插入的内容，是必须的，可以是空，字符串或者是其他属性内容：

content: " (" attr(href) ")";

这里的"attr(href)"为变量，获取的href属性

<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 25px;
background-color: red
}
p:after
{
font-size: 5px;
content:"-台词";
width: 10px;
height: 10px;
background-color: blue;
border: 3px solid green
}
</style>
</head>

<body>

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

</body>
</html>

其他用法

相对和绝对位置：

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;

content可设置内容：

content:url(../i/w3school_logo_white.gif)}

content: attr(data-descr);

content: "123"

content:"(" attr(href) ")";

content 为空，且绝对定位：

此种情况一般用于插入div动画内容，通过设置relative和绝对布局的方式，这样伪元素就可以基于父元素的位置控制出现的位置了

<style>
@-webkit-keyframes crashChrome {
  100%{ -webkit-transform: scale(2);}
}
	
.anim{
    box-sizing:border-box;
	position: relative;
	width: 6rem;
	height: 6rem;
	background-color: red;
	}
.anim:before{
    content: "";
    width: 3rem;
    height: 3rem;    
    position: absolute;    
    left:0rem;    
    top: 0rem;        
    background-color: #06839f;        
	-webkit-animation: crashChrome 1s;
}
	</style>

<div class="anim"></div>

变量：

但在一般项目中，是不可能通过这样的方式去解决。通过在 :root 伪类上设置自定义属性，然后在整个文档需要的地方使用，可以减少这样的重复性：

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

自定义属性会继承。

用 var() 函数可以定义多个备用值(fallback value)

 color: var(--my-var, red); /* Red if --my-var is not defined */

当浏览器遇到无效的 var() 时，会使用继承值或初始值代替。

JavaScript 中的值

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

confiself

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习--伪类before/after

伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。在html中不可见，只在css中可见伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。伪元素(双冒号)，css3中的伪类是（单冒号）content为要插入的内容，是必须的，可以是空，字符串或者是其他属性内容：content: " (" attr(href) ")";这里的"attr(href)"为变量，获取的href属性<!DOCTYPE html><ht..
复制链接

扫一扫