在 css 形状的链接中设置文本样式的问题

如何解决在 css 形状的链接中设置文本样式的问题

我通过在 CSS 中创建形状创建了一个步骤/指针水平导航。我遇到的问题是我似乎无法在链接中定位和设置文本“Step X: Some text”的样式。我在链接文本周围有一个 span 类，我想在其中放置和设置样式，但是它似乎对文本没有任何作用，但对整个链接有作用。例如，如果我将文本样式设置为 margin-top: 25px;文本不会移动，但整个导航栏会移动。

有人可以纠正这个问题并告诉我它是如何完成的，非常感谢！

这是我的 html：

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <link rel="stylesheet" href="shappednav.css">
    </head>
    <body>
        <div class="navh">
            <ul >
                <li id="item1"><a href="#" <span class="text">Step 1: Some text</span></a></li>
                <li><a href="#" <span class="text">Step 2: Some text</span></a></li>
                <li><a href="#" <span class="text">Step 3: Some text</span></a></li>
                <li><a href="#" <span class="text">Step 4: Some text</span></a></li>
            </ul>
        </div>
    </body>
</html>

这是我的 CSS：

.navh{
    background-color: transparent;
    padding: 0;
    width: 100%;
    margin: 1em auto;
    clear: both;
    border-bottom: none;  
}

.navh ul{
    list-style-type: none;
}

.navh li a  {
    width: 180px;
    height: 125px;
    position: relative;
    background: #1b9fa4;
    border-radius:2%;
    float:left;
    margin-left: 10px;
    background-color: #e91e63 ;
    border-color: #1b9fa4;
}

#item1 :after {
   border-left: 0px solid; 
}

.navh li  :after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 62.5px solid white;
    border-top: 62.5px solid transparent;
    border-bottom: 62.5px solid transparent;
    z-index:1;
}

.navh li :before {
    content: "";
    position: absolute;
    right: -62.5px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 62.5px solid #e91e63;
    border-top: 62.5px solid transparent;
    border-bottom: 62.5px solid transparent;
    z-index: 2;
}

.navh li a:hover{
    background: yellow;
}

.navh li a:hover:before {
    border-left: 62.5px solid yellow;
/*  border-top: 62.5px solid transparent;
    border-bottom: 62.5px solid transparent;*/
}

span.text {
    border:solid;
    Color:white;
}

解决方法

将此添加到您的 CSS：

.navh li a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

所以你要做的就是将css设置为：

.text {
border:solid;
Color:white;

}

.navh{
    background-color: transparent;
    padding: 0;
    width: 100%;
    margin: 1em auto;
    clear: both;
    border-bottom: none;  
 
}

.navh ul{
list-style-type: none;

}


.navh li a  {
  width: 180px;
  height: 125px;
  position: relative;
  background: #1b9fa4;
  border-radius:2%;
  float:left;
  margin-left: 10px;
  background-color: #e91e63 ;
  border-color: #1b9fa4;
  

}


#item1 :after {
       border-left: 0px solid; 
  }

  .navh li  :after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 62.5px solid white;
  border-top: 62.5px solid transparent;
  border-bottom: 62.5px solid transparent;
  z-index:1;

}
.navh li :before {
    content: "";
    position: absolute;
    right: -62.5px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 62.5px solid #e91e63;
    border-top: 62.5px solid transparent;
    border-bottom: 62.5px solid transparent;
    z-index: 2;

}
.navh li a:hover{
background: yellow;
}


.navh li a:hover:before {
    border-left: 62.5px solid yellow;
/*    border-top: 62.5px solid transparent;
    border-bottom: 62.5px solid transparent;*/
}



.text {

}

a {
Color:white;
text-align: right;
line-height: 115px;   

}

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
<link rel="stylesheet" href="shappednav.css">
      
  </head>

  <body>


<div class="navh">
  <ul >
    <li id="item1"><a href="#"> <span class="text">Step 1: Some text</span></a></li>
    <li><a href="#"> <span class="text">Step 2: Some text</span></a></li>
    <li><a href="#"> <span class="text">Step 3: Some text</span></a></li>
    <li><a href="#"> <span class="text">Step 4: Some text</span></a></li>
  </ul>

 </div>


  </body>
</html>