:after选择器-----分割线
2024-09-06 11:34:27
分割线:
让span中的文字覆盖分割线,需要:给div和span设置同样的background-color,并且给span设置z-index。
接下来就是margin和padding的调整了。
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height: 20px;
background-color:#FFFFFF;
text-align: center;
position: relative;
}
div:after {
content: "";
width: 100%;
height: 1px;
background-color: red;
position: absolute;
top: 50%;
left: 0;
}
div span {
z-index:1;
position: relative;
background-color:#FFFFFF;
padding:0 5px;
}
</style>
</head>
<body>
<div class="hot">
<span>茶品营销</span>
</div>
</body>
</html>
分割线一
分隔线:
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.range {
width: 500px; /*这里不设置div的高度,下边用padding来显示高度*/
background: rgba(0, 0, 0, 0.6);
position:absolute;
}
.range a {
text-decoration: none;
float: left;
text-align: center;
width: 50%;
display: inline-block;
padding: 10px 0; /*设置padding用来撑高盒子的高度*/
color: #fff;
}
.range:after {
content: "";
width: 1px;
height: 70%;
background-color: #fff;
position: absolute;
left: 50%;
top: 5px; /*div的高度是10px,取一半的值*/
}
</style>
</head>
<body>
<div class="range">
<a href=" ">优惠幅度6.8折</a>
<a href=" ">已有999人购买</a>
</div>
</body>
</html>
分隔线
最新文章
- sip协议音视频性能测试
- 无法连接虚拟设别 ide1:0.
- swfit-扩展语法
- [ActionScript 3.0] AS3.0 将图像的Alpha通道转换为黑白图像(分离ARGB方式)
- 改进ConcurrentDictionary并行使用的性能
- jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明
- ASP.NET5 MVC6入门教学之一(自己动手)
- ORA-12518: TNS: 监听程序无法分发客户机连接
- LA 3177 长城守卫
- CSS的魔法和魅力
- JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本
- percona-toolkit工具检查MySQL复制一致性及修复
- 利用css3-animation来制作逐帧动画
- 修改mysql的默认字符集
- appium desktop 版本发布
- 新装的主机没有ifconfig,route等命令,怎么查找对应的安装包
- 发送email
- VM14安装Mas os 13
- redis互斥锁简易设计原理【原】
- codestyle 设置问题
热门文章
- 2019.8.5 NOIP模拟测试13 反思总结【已更新完毕】
- 洛谷P1508 Likecloud-吃、吃、吃 [2017年4月计划 动态规划10]
- Leetcode686.Repeated String Match重复叠加字符串匹配
- 阿里云数据管理DMS企业版发布年度重大更新 多项功能全面升级
- WCF 服务
- LintCode_408 二进制求和
- PAT天梯赛L1-002 打印漏斗
- U盘安装win7 raid设置
- No.2 Verilog 模块和描述风格
- docker-compose进入容器出现unable to find user root: no matching entries in passwd file