1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
}
/* 1 边框 */
.div {
width: 100px;
height: 40px;
background-color: #ff6700;
position: relative;
}
/*
.div:hover {
border-bottom: 3px solid blue;
} */
/* 2 伪元素 */
.div:hover:after {
position: absolute;
top: 100%;
height: 4px;
content: '';
display: block;
width: 100px;
background-color: red;
}
/* 3-1 */
#underline {
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline::before,
#underline:after {
content: "";
/*单引号双引号都可以，但必须是英文*/
width: 0;
/*默认0 */
height: 3px;
/*下划线高度*/
background: blue;
/*下划线颜色*/
position: absolute;
top: 110%;
left: 50%;
transition: all .8s;
/*css动画效果，0.8秒完成*/
}
#underline:hover:before {
/*动画效果是从中间向左延伸至50%的宽度*/
left: 0%;
width: 50%;
}
#underline:hover:after {
/*动画效果是从中间向右延伸至50%的宽度*/
left: 50%;
/*这句多余，主要是为了对照*/
width: 50%;
}
</style>
<body>
<div id="underline"></div>
<div class="div"> </div>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
list-style: none;
}
.box {
position: relative;
}
div {
width: 100px;
height: 30px;
background-color: red;
margin-left: 8px;
}
div:after {
content: "";
width: 3px;
height: 30px;
background-color: #FF9201;
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<li class="box">
<div></div>
</li>
</body>
</html>
2
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
}
.parent {
position: relative;
width: 300px;
border: #000 solid 1px;
}
.parent .div {
width: 200px;
height: 50px;
background-color: #ff6700;
margin-left: 40px;
}
.parent .son::after{
content: '';
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0;
left:10px;
background-color: blue;
}
</style>
<body>
<div class="parent">
<div class="div son"></div>
</div>
<script>
</script>
</body>
</html>
image.png
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.markdown-body {
display: inline-block;
color: #a862ea;
cursor: pointer;
text-decoration: none;
position: relative;
}
.markdown-body:after{
content: "";
position: absolute;
width: 98%;
height: 1px;
bottom: 0;
left: 0;
transform: scaleX(0);
background-color: #e81a1a;
transform-origin: bottom right;
transition: transform 0.3s ease-in-out;
}
.markdown-body:hover:after{
transform: scaleX(1);
}
</style>
<body>
<div class="markdown-body">哈哈哈</div>
</body>
</html>
网友评论