css attr() 函数

weixin_48597380

于 2023-02-16 15:27:05 发布

阅读量765

点赞数

文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/weixin_48597380/article/details/129062891

版权

css attr() 函数使用

自定义的属性名需要相对应 （data-text）

			<ul>
                <li v-for="(item,index) in flowList" :key="index" :data-text="item.nickname.substring(0,1)">
                  <img v-if="item.avatar" :src="item.avatar" alt="" :title="item.info">
                  <img v-else src="../../assets/img/doc/defaulthead.png" alt="" :title="item.info">
                  <div class="right">
                    <div class="decortain" v-if="item.auditOption">{{item.auditOption}}</div>
                    <div class="decortain" v-else>无特定说明</div>
                    <div class="flex_der">
                      <span>{{item.updateAt}}</span>
                      <span :title="item.nickname">{{item.nickname}}</span>
                    </div>
                  </div>
                </li>
              </ul>

css中使用（可以添加给普通元素也可以添加给伪类元素的 content ）

									& li {
										position: relative;
										padding-left: 33px;
										margin-bottom: 25px;
										font-size: 14px;
										display:flex;
					                    color: #0C0C0C;
					                    &:before {
											content: attr(data-text);
											position: absolute;
											left: 6px;
											top: 12px;
											width: 25px;
											height: 25px;
										}