Adaptive border according to text size

Question

Adaptive border according to text size

Navigation

#1 by (0 votes)

2

Whatisthecorrectwaytodothisborderbelowthetext?I'mcurrentlydoingitthisway,butifthetextistoolargeandbreakforbottomlinetheborderdoesnotfitthesizeandbreaktoo,howdoIadaptittothelinebreakthatmayhavedependingonthesizeofthetext?

.blog_post_list {
  width: 695px;
  float: left;
  margin-bottom: 50px;
}
.post-list .post-item:first-child {
  margin-top: 0;
}
.blog_post_item {
  margin-top: 0px;
  padding-bottom: 95px;
  position: relative;
}
.blog_flexbox_grid {
  display: flex;
  padding-bottom: 10px;
}
.blog_flexbox_data {
  width: 17.0%;
}   
.sublinhado {
      border-bottom: 2px solid #fece02;
}
.blog_post_item_imagem {
  position: relative;
}
.blog_post_item_data {
  background-color: #fece02;
  width: 85px;
  height: 35px;
  position: static;
}
.blog_post_item_data > .dia {
  font-size: 16px;
  font-weight: 500;
}
.blog_post_item_data > .mes {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 100;
}
.blog_post_item_data > .dia, .blog_post_item_data > .mes {
  color: #ffffff;
  width: 100%;
  text-align: center;
  line-height: 35px;
  display: block;
  font-size: 20px;
}
.blog_flexbox_titulo {
  width: 83.0%;
  padding-top: 5px;
}   

.blog_flexbox_titulo a {
  width: 83.0%;
}
.blog_titulo_ a {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.titulo_blog {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.blog_titulo_ a:hover {
  color: #082755;
  text-decoration: none;
}

<div class="container">
  <h2>Blog</h2>	
  <div class="blog_post_list">
    <article class= "blog_post_item">
      <div class="blog_flexbox_grid">
        <div class="blog_flexbox_data sublinhado">
          <div class="blog_post_item_imagem">
            <div class="blog_post_item_data">
              <span class="dia">24.Out</span>
            </div>
          </div>
        </div>
        <div class="blog_flexbox_titulo blog_titulo_ sublinhado">             <a href="#">4 dicas para uma criança ser feliz </a>
        </div>
      </div>
    </article>
  </div>
</div>

If someone has a light, another way to do it, any help is welcome.

html html5 css

asked by anonymous 31.10.2017 / 22:55

1 answer

Modify the range of a JSlider How to transform numeric digits into full numbers?

score 0 · Accepted Answer

Some modifications are necessary for this. See the comments in the CSS what was added and removed (instead of line-height , translate was used to center date text):

.blog_post_list {
  width: 695px;
  float: left;
  margin-bottom: 50px;
}
.post-list .post-item:first-child {
  margin-top: 0;
}
.blog_post_item {
  margin-top: 0px;
  padding-bottom: 95px;
  position: relative;
}
.blog_flexbox_grid {
  display: flex;
  padding-bottom: 10px;
}
.blog_flexbox_data {
  width: 17.0%;
}   
.sublinhado {
      border-bottom: 2px solid #fece02;
}
.blog_post_item_imagem {
  position: relative;
  display: block;
  height: 100%;
}
.blog_post_item_data {
  background-color: #fece02;
  width: 85px;
/*  height: 35px; */
  position: static;
/* linhas abaixo adicionadas */
  height: 100%;
  display: inline-block;
}
.blog_post_item_data > .dia {
  font-size: 16px;
  font-weight: 500;
}
.blog_post_item_data > .mes {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 100;
}
.blog_post_item_data > .dia, .blog_post_item_data > .mes {
  color: #ffffff;
  width: 100%;
  text-align: center;
/*  line-height: 35px; */
  display: block;
  font-size: 20px;
  /* linhas abaixo adicionadas */
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
top:50%;
position: relative;
}
.blog_flexbox_titulo {
  width: 83.0%;
  padding-top: 5px;
}   

.blog_flexbox_titulo a {
  width: 83.0%;
}
.blog_titulo_ a {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.titulo_blog {
  font-family: 'Fira Sans', sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: #082755;
  margin: 0;
}
.blog_titulo_ a:hover {
  color: #082755;
  text-decoration: none;
}

<div class="container">
  <h2>Blog</h2>	
  <div class="blog_post_list">
    <article class= "blog_post_item">
      <div class="blog_flexbox_grid">
        <div class="blog_flexbox_data sublinhado">
          <div class="blog_post_item_imagem">
            <div class="blog_post_item_data">
              <span class="dia">24.Out</span>
            </div>
          </div>
        </div>
        <div class="blog_flexbox_titulo blog_titulo_ sublinhado"><a href="#">4 dicas para uma criança ser 4 dicas para uma criança ser</a>
        </div>
      </div>
    </article>
  </div>
</div>