纯css添加div

发表于:2021-05-13 19:00

技术,css

热度:182

喜欢:1

今天接到一个需求，在贴片图片的左下角添加一段文字，表明“广告”二字
乍一听挺简单的，后来拿到源码发现不对劲

html 复制代码

<script type='text/javascript' charset='utf-8' src='http://adv.scriot....'></script>
<div style="display: none;">
		<script type="text/javascript" src="https://v1.cnzz.com/z_stat.php...."></script>
</div>

源码只有这一段，贴片广告的素材来自第一段的script标签，然后动态创建了一个div
div的class还有id由厂商提供，不固定所以添加文字有两个难点，难怪会找我

html内容由厂商提供，script生成了div和图片链接，大小不固定
图片是可替换配置的，由厂商提供，厂商才不会给你在素材上加字
格式相对固定，大小也是相对
脑筋一动，用纯css实现了

css 复制代码

body>div:first-of-type::before {
    position: absolute;
    bottom: 0;
    left: 5px;
    display: block;
    content: '广告';
    color: #fff;
    pointer-events: none;
}