如何将一条线作为一个伪元素？
如何将一条线作为一个伪元素？
提问于 2018-08-01 05:05:11
所以，我被困在这个问题上了。在下面的图片中，你可以看到我应该做什么。但是，我真的不知道如何在div之间创建这些交叉线。
以下是我到目前为止所做的代码：https://codepen.io/kaeses_developer/pen/wxyYdb
我想我必须为.menu-item--large创建一个:before和:after伪元素。
.menu-item--large {
flex-basis: 100%;
font-size: 36px;
background: none;
margin: 0 50%;
}但是我怎么才能做得对呢？或者有任何不同的方法来制作它？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-01 06:09:43
在这里，我按照你的要求使用了伪元素，并提出了这个codepen，首先检查它，这是下面的代码。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
background-image: url(https://i.pinimg.com/originals/a4/6c/6d/a46c6d2f5104ea715af56e5c60d57eac.jpg);
}
.menu-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 25%;
}
.menu-item {
background-color: rgba(0,0,0,.2);
flex: 1 1 25%;
font-size: 250px;
text-align: center;
margin: 10px;
color: #fff;
}
.menu-item--large {
flex-basis: 100%;
font-size: 36px;
background: none;
margin: 0 50%;
}
.menu-item:hover > i {
opacity: .4;
color: #000;
}
@media only screen and (min-width: 720px) {
.menu-item.menu-item--with-v-divider {
position: relative;
margin-right: 50px;
}
.menu-item.menu-item--with-v-divider:after {
content: '';
display: inline-block;
position: absolute;
right: -30px;
height: 100%;
width: 1px;
background-color: #e5e5e5e5;
}
.menu-item.menu-item--with-h-dividers {
position: relative;
margin: 20px 0;
}
.menu-item.menu-item--with-h-dividers:after,
.menu-item.menu-item--with-h-dividers:before {
content: '';
position: absolute;
width: 325px;
height: 1px;
top: 20px;
background-color: #e5e5e5;
}
.menu-item.menu-item--with-h-dividers:after {
right: 15px;
}
.menu-item.menu-item--with-h-dividers:before {
left: 15px;
}
}<!DOCTYPE html>
<html>
<head>
<title>menu 2</title>
<link rel="stylesheet" href="menu-2.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menu-container">
<div class="menu-item menu-item--with-v-divider">
<i class="far fa-list-alt"></i>
</div>
<div class="menu-item">
<i class="fas fa-user"></i>
</div>
<div class="menu-item menu-item--large menu-item--with-h-dividers">
<i class="fas fa-sign-in-alt"></i>
</div>
<div class="menu-item menu-item--with-v-divider">
<i class="fas fa-plus"></i>
</div>
<div class="menu-item">
<i class="fas fa-pencil-alt"></i>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-08-01 05:39:37
您确实可以使用伪图像，但也可以使用背景图像(渐变和currentcolor也可以)。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
background-image: url(https://i.pinimg.com/originals/a4/6c/6d/a46c6d2f5104ea715af56e5c60d57eac.jpg);
}
.menu-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 25%;
}
.menu-item {
background-color: rgba(0, 0, 0, 0.2);
flex: 1 1 25%;
font-size: 20vw;/* demo purpose */
text-align: center;
margin: 10px;
color: #fff;
position: relative;
}
/* add pseudo where needed to draw a line */
.menu-item:not(.menu-item--large)+.menu-item:not(.menu-item--large):before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
border-left: solid 2px;
margin-left: -10px;
}
div.menu-item.menu-item--large {
min-width: 100%;
font-size: 36px;
/* extra to draw lines */
background: linear-gradient( to right, transparent 0.75em, currentcolor 0.75em, currentcolor calc(50% - 1em), transparent calc(50% - 1em), transparent calc(50% + 1em), currentcolor calc(50% + 1em), currentcolor calc(100% - 0.75em), transparent calc(100% - 0.75em)) 50% 50% no-repeat;
background-size: 100% 2px;
/* end extra */
margin: 0 50%;
}
.menu-item:hover {
opacity: 0.4;
color: #000;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="menu-container">
<div class="menu-item">
<i class="far fa-list-alt"></i>
</div>
<div class="menu-item">
<i class="fas fa-user"></i>
</div>
<div class="menu-item menu-item--large">
<i class="fas fa-sign-in-alt"></i>
</div>
<div class="menu-item">
<i class="fas fa-plus"></i>
</div>
<div class="menu-item">
<i class="fas fa-pencil-alt"></i>
</div>
</div>
Stack Overflow用户
发布于 2018-08-01 05:43:43
对于垂直线，我不认为你需要使用伪元素。只是更多的div。我们称它们为.垂直线条
.vertical-line {
border-right: 1px solid rgba(255,255,255,0.5);
margin: 10px 0;
}对于水平线，我们将使用伪元素：
.menu-item--large:before {
content: '';
border-bottom: 1px solid rgba(255,255,255,0.5);
position: absolute;
display: inline-block;
left: 30px;
right: calc(50% + 30px);
top: 50%;
z-index: -1;
}
.menu-item--large:after {
content: '';
border-bottom: 1px solid rgba(255,255,255,0.5);
position: absolute;
display: inline-block;
right: 30px;
left: calc(50% + 30px);
top: 50%;
z-index: -1;
}上面那些30px的数字是基于我增加了.菜单项的边距，所以它看起来更像你附加的图像。我还将position: relative;添加到了.menu容器中，以使绝对定位有效。https://codepen.io/mlissne/pen/XBZybZ
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51622064
复制相关文章
相似问题