css伪类加垂直分割线

加垂直分割线有很多方法：

例如：

1、最坏的实现就是直接加一个 “|”线，尽量不要这样做

2、可以用border来实现。例如：

    margin-right: 15px;padding-right: 15px;border-right: 1px solid #d9d9d9;

3、用伪类实现：

.fix-text {&:after {content: "";margin-left: 15px;padding-left: 15px;border-left: 1px solid #c0c4cc;height: 12px;display: inline-block;vertical-align: middle;}}

另一种写法，用定位

.fix-text {&:before {content: "";width: 1px;height: 50%;position: absolute;top: 25%;left: 0;background: #dcdfe6;}
}

还有很多种方式，暂时只列举三种，我最常用的是用伪类实现，可以定义高度，border只能用框的高度

css伪类加垂直分割线相关推荐

css+伪类+加载动画,CSS3 optional伪类兼容实现加载中loading效果 » 张鑫旭-鑫空间-鑫生活...
CSS代码: /* 无限旋转哔哔哔->奥特曼 */ .spin { -webkit-transform: rotate(360deg); -webkit-animation: spin 1s ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果
Title .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: #F2AE ...
:empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
html之CSS设计（CSS伪类、优先级、字体属性、背景属性）
文章目录一.CSS伪类二.CSS优先级三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
CSS伪类选择器详细讲解
前言伪类选择器在CSS中起到的作用可以说是至关重要的,如果CSS没有伪类选择器,有很多效果都要借助js来完成,这样不仅代码量增加,维护起来你难度也大.这样程序员的工作量大,也违背了CSS诞生的作用, ...
css 伪类大全,CSS伪类
简介 CSS 伪类 (Pseudo-classes)是W3C里制定的一套选择器的特殊状态,有几十个之多.语法如下: selector:pseudo-class {property: value;} 我 ...
CSS伪类布局菜单框学习+总结
CSS伪类伪类的定义是:添加一些选择器的特殊效果. 选择器常见的有:id,tag,class,属性[attr=attrval]等.我暂时还不懂这个伪类是什么意思,但是我们知道CSS是html网页的表 ...

css伪类加垂直分割线

加垂直分割线有很多方法：

例如：

1、最坏的实现就是直接加一个 “|”线，尽量不要这样做

2、可以用border来实现。例如：

3、用伪类实现：

另一种写法，用定位

还有很多种方式，暂时只列举三种，我最常用的是用伪类实现，可以定义高度，border只能用框的高度

css伪类加垂直分割线相关推荐

最新文章

热门文章