CODEWITHSUNDEEP
htmlcss
Mazen
Mazen

Reputation: 3

how to control border bottom position

I hava a text logo (Doop) and i add border bottom but I can not control it. how I can make the border bottom exactly in the center of the word(Doop) .I need this border to be exactly under the 2 (o)letters. like this image >>i WANT LIKE THIS

.nav > .nav-header > .logo {
  display: inline-block;
  font-size: 22px;
  color: hsl(0, 0%, 0%);
  padding: 10px;
  width: 20%;
  text-align: center;
  border-bottom: 2px solid rgb(223 35 44 / 92%);
}
<div class="nav">
        <input type="checkbox" id="nav-check" />
        <div class="nav-header">
            <div class="logo"><a href="#" class="logo-word">Doop</a></div>
        </div>

AND THIS IMAGE IS MINE

Upvotes: 0

Views: 165

Answers (1)

J4R
J4R

Reputation: 1104

I'ts not possible with border only to control it like you want. You could use a pseudo element, for example ::after. With a absolute, centered position and a little adjustment it should do what u want to.

.nav > .nav-header > .logo {
  display: inline-block;
  font-size: 22px;
  color: hsl(0, 0%, 0%);
  padding: 0 10px;
  width: 20%;
  text-align: center;

 /* added this also, for pseudo absolute positioning */ 
  position: relative;
}

.logo a {
  text-decoration: none;
}

.logo::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 2px;
  width: 18px;
  background-color: rgb(223 35 44 / 92%);
}
<div class="nav">
        <input type="checkbox" id="nav-check" />
        <div class="nav-header">
            <div class="logo"><a href="#" class="logo-word">Doop</a></div>
 </div>

Upvotes: 1

Related Questions