我希望我的活動元素在其頂部有一條垂直線，并提示我使用CSS:before或:afterCSS 來制作這條線。但是，我對這兩個標簽并不是很熟悉，我嘗試了一些使用:after，但它似乎不起作用。你能給我一些建議/建議嗎？下面是它應該是什么樣子的設計示例。
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
}
.nav-menu .nav-list .nav-item .active ::after {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
top: 0;
} <nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>uj5u.com熱心網友回復：
在您使用的父級上使用active:before和使用。這是您的代碼示例：position:relativeposition:absolute
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
position: relative;
}
.nav-menu .nav-list .nav-item .active:before {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
bottom: 100%;
}<nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>uj5u.com熱心網友回復：
你可以使用這樣的東西。
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
.box{
width: 10rem;
height: 5rem;
border: 1px solid black;
}
.box::before{
display: block;
position: relative;
left: 50%;
transform: translate(-50%);
content: '';
height: 1.5rem;
width: 2px;
background-color: brown;
}<body>
<div class="box"></div>
</body>uj5u.com熱心網友回復：
看起來你正在使用 Bootstrap？如果是這樣，大多數 CSS 可能無法正常作業。下面的示例加載了 Bootstrap 5，并且您的自定義 CSS 太復雜而無法遵循，因此我不得不將其洗掉（無論如何，BS 樣式會抑制其中的大部分內容），并添加了以下 CSS：
.active {
position: relative
}
.active::before {
content: '|';
position: absolute;
left: calc(50% - 0.25ch);
top: -1ch;
color: tomato;
}
只要分配了鏈接，就會出現這種樣式.active。如果|t 太高，請嘗試font-size直接在.active::before選擇器上減少 - 使用開發工具查找計算font-size結果，.active::before以了解您應該減少多少。另外，我根據 BS 建議的用途更改了一些 BS 類。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.active {
position: relative
}
.active::before {
content: '|';
position: absolute;
left: calc(50% - 0.25ch);
top: -1ch;
color: tomato;
}
</style>
</head>
<body>
<main class="container">
<section class="row">
<nav class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474063.html