我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

最近在查找内容的时候,看到了一个页面样式,觉得不错。就想翻翻看css样式,结果猛然间发现了一个新的css属性content:attr(),这句css可以获取一个自定义属性内的内容。当然,用js获取这样的内容,是非常容易的。但是!这个是css获取的,是不是就有点厉害了。

苏南大叔:css如何获取自身样式文本?一个好看的文章摘要样式 - css-attr属性使用
css如何获取自身样式文本?一个好看的文章摘要样式(图2-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔和一系列程序代码的故事。本文写的是一个css的新的用法,可以用于获取文本数据。测试环境:win10chrome@98.0.4758.102

代码整理

苏南大叔:css如何获取自身样式文本?一个好看的文章摘要样式 - html效果截图
css如何获取自身样式文本?一个好看的文章摘要样式(图2-2)

<div id="CRC" class="cf-tag well" tag-content="简介"><div>文字文字文文字文字文字文字</div></div>
<style>
.well.cf-tag {
    padding: 20px 20px 20px;
}

.cf-tag {
    position: relative;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.well.cf-tag:after {
    top: -11px;
    left: -11px;
    background-color: #fdfdfd;
}

.cf-tag:after {
    content: attr(tag-content);
    position: absolute;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #d8d8d8;
    color: #9da0a4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}
</style>

核心代码

<div class="cf-tag" tag-content="简介"></div>
<style>
.cf-tag:after {
    content: attr(tag-content);
}
</style>

话又说回来,为啥不直接在div里面写文字呢?何必绕这么一个大弯儿呢?哈哈~

相关文献

总结

本文的核心内容就是一句话content: attr(),这样的使用方法应该是比较罕见的。更多css样式的事情,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css