required前面加*

.required::before {
  content: '*';
  color: red;
}

content: attr()；用法

基本content用法

content属性能让程序员使用CSS往页面元素里填写内容：

.myDiv:after {
  content: '我是一个使用content属性生产的静态文字';
}

注意，如果想让伪元素：after绝对定位，必须对div设置position:relative

举例：

https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31ecfd4851e0423db1727cc71d92fc21~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=560&h=204&s=30510&e=png&b=f6fefe

关键属性、选择器和函数
content , data -  ,
:
before ,
:
after , attr(),：

:
before ,
:
after
向指定元素插入内容，使用content属性指定插入的内容。
content一般和伪元素 :before和 :after搭配使用, 一起生成内容。


attr()
函数：可以获取该元素的属性，一般和data - * 自定义属性配合使用。


data - *：

data - * 属性用于存储私有页面后应用的自定义数据。

data - * 属性可以在所有的
HTML
元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用
Ajax
或去服务端查询数据）。

html结构：

<div data-content="我是一个悬浮提示框" class="content">鼠标滑过我</div>;

css样式：

.content {
  text-align: center;
  height: 50px;
  line-height: 50px;
  width: 100px;
  margin: 100px auto;
  padding: 5px;
  background-color: rgb(196, 0, 0);
  color: white;
  font-size: 18px;
  position: relative;
}

.content:hover {
  cursor: pointer;
}

.content:hover:before {
  content: attr(data-content); /*动态获取数据*/
  position: absolute;
  left: 100%;
  width: 200px;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  background-color: rgb(0, 196, 0);
  margin-left: 12px;
}

.content:hover:after {
  /*实现小三角*/
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin: -10px 0 0 -8px;
  width: 0;
  height: 0;
  border-width: 10px;
  border-color: transparent rgb(0, 196, 0) transparent transparent;
  border-style: solid;
}

效果2

给pic-status-wrapper设置悬浮时，

/* 设置鼠标悬浮样式 */
&:hover {
  .normal::after {
    content: attr(filename);
    z-index: 0;
    display: block;
    width: 100%;
    height: 68%;
    padding: 3px;
    box-sizing: border-box;
    background-image: linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.2) 22%,
      rgba(0, 0, 0, 0.4) 56%,
      rgba(0, 0, 0, 0.6)
    );
    border-radius: 0 0 4px 4px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 12px;
  }
}

动效

https://uiverse.io/inputs

Contributors

作者:Long Mo

字数统计:576 字

阅读时长:2 分钟

Long Mo

文章作者：Long Mo

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！