Aligns pseudo element to forward in the navigation bar

Navigation
0

I'm having a hard time aligning the: before bar on the right. Can anyone help me with this?

I'm using this code: 

.nav-romeu li:before {
    content: '';
    width: 50px;
    height: 2px;
    background: #000;
    position: absolute;
    top: 70px;
    float: left;
}

My site is: amem.romeuadv.com.br

Thanks in advance!

    
asked by anonymous 04.08.2017 / 16:27

1 answer

1

Thanks for the Fiddle. If I understand you, you want the lines to stick to the right of the space, right?

If this is the case, you resolve with the following additions to your CSS: 

li {
    position: relative;
}
.nav-romeu li:before {
  right: 0;
}

Follow the example: 

* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none !important;
  list-style-type: none !important;
}

li {
  position: relative;
}

body {
  font-family: Helvetica;
  margin-bottom: 0 !important;
  -webkit-font-smoothing: antialiased;
}

.header-fixed {
  height: 110px;
  width: 100%;
  line-height: 108px;
  background: #fff;
  border-bottom: 3px solid rgb(142, 21, 29);
}

.header-fixed img {
  display: block;
  margin: 10px 0;
}

.nav-romeu {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.nav-romeu li a {
  font-family: "Helvetica";
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  color: rgb(142, 21, 29);
  font-smooth: always;
  display: block;
  padding: 0 15px;
}

.nav-romeu li:before {
  content: '';
  width: 40px;
  height: 2px;
  background: #000;
  position: absolute;
  top: 70px;
  right: 0;
}
<header class="header-fixed">
  <div class="container">

    <ul class="nav-romeu">
      <li><a href="#">teste </a></li>
      <li><a href="#">teste </a></li>
      <li><a href="#">teste </a></li>
      <li><a href="#">teste </a></li>
    </ul>
  </div>
</header>
    
04.08.2017 / 18:23
Catch the child element of the child in css How do I search on an external site?