纯css添加div

发表于:2021-05-13 19:00技术,css热度:158喜欢:1

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

<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由厂商提供,不固定 所以添加文字有两个难点,难怪会找我

  1. html内容由厂商提供,script生成了div和图片链接,大小不固定
  2. 图片是可替换配置的,由厂商提供,厂商才不会给你在素材上加字
  3. 格式相对固定,大小也是相对
    脑筋一动,用纯css实现了
body>div:first-of-type::before {
    position: absolute;
    bottom: 0;
    left: 5px;
    display: block;
    content: '广告';
    color: #fff;
    pointer-events: none;
}