使用 :after伪元素撑开 div

使用 :after伪元素撑开 div，

<html>
<head><style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>
</head>
<body>
    <div class="clearfix" style="padding:1px 1px 1px 1px; border: 1px solid red; width:200px;">
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    </div>
</body>
</html>

TEST DIV

转载于:https://www.cnblogs.com/npk19195global/p/4474914.html

使用 :after伪元素撑开 div相关推荐

css与父元素高度一致,制作CSS伪元素:与父div相同的高度
Tushar Chutani 5 html sass css3 我有一个父div必须在它的边缘有一个蓝色背景.我决定使用:在psedoeelement之前做到这一点.我将位置设置为绝对值,高度设置为1 ...
理解伪元素 :before 和 :after
为什么80%的码农都做不了架构师?>>> 层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一 ...
一句话让你明白伪元素和伪类的区别
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到. 下面就这句话给出例子伪类 :first-child <div><p>我是一个段 ...
伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
伪元素的本质，以及伪元素的妙用（下）
伪元素的本质,及妙用好了,上期讲解了什么是伪类,这期呢,我们来看看伪元素是什么? 我们可以看到,很多网站对它的定义为,用于向某些选择器设置特殊效果,这句话,真的是我还是不明白它在讲什么,太简洁了,我 ...
css伪类和伪元素的特性和区别
伪元素是真的有元素前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息: 伪元素本质上是创建了一个有内容的虚拟容器: CS ...
CSS如何使用伪元素选择器给所有的div里的文本前面添加小写罗马数字编号
一.需求说明假设现在我有三个div标签,它们在浏览器里显示的内容如下图所示: 我希望使用CSS给它们全部添加上序号,添加好序号后的样子如下图所示: 可以看到序号是递增的,不是普通的阿拉伯数字,而是小 ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...
【CSS】1049- 深入了解::before 和 ::after 伪元素
本文从最简单的开始,解释如何理解和使用::before和::after.然后再在实际使用场景中去应用它. ::before和::after是什么? ::before和::after可以添加到选择器以创 ...
深入了解::before 和 ::after 伪元素
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群本文从最简单的开始,解释如何理解和使用::before和::after.然后再在实际使用场景中去应用它. ::before和 ...

使用 :after伪元素撑开 div

使用 :after伪元素撑开 div相关推荐

最新文章

热门文章