Issue with styling the text within a css shaped links

I have created a step / pointer horizontal navigation by creating shapes in CSS. The issue I am having is I cant seem to position and style the text "Step X: Some text" within the links. I have a span class around the link text that i want to position and style inside, however it doesnt seem to do anything to the text, but does to the overall link. For example if i style the text as margin-top: 25px; the text doesnt move but the whole navigation bar does.

Can someone please correct this issue and tell me how it suppose to be done, it would be very much appreciated!

This is my 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>

This is my 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;
}

Solution

So all you got to do is set the css to:

.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>