Limitare la lunghezza del bordo di un DIV con CSS

Limitare la la lunghezza del bordo di un DIV con CSS

Supponiamo di avere un generico <div> che vogliamo accompagnare con un bordo che invece di coprire l’intera dimensione del <div> stesso ne copre solo una parte.limit-border-lenght-than-div

Soluzione per limitare la la lunghezza del bordo di un DIV con CSS

    1. Crea il div contenente ad esempio un immagine
    2. <div class="images">
       <div class="img">
       <img src="img/th_256_sq_1.jpeg" width="220px">
       </div>
       <h4>Travel</h4>
      </div>
    3. Aggiungere le proprietà CSS
    4. .images .img {
       position: relative;
       }
      
      .images .img:after {
       content: "";
       background: #D77D19;
       position: absolute;
       bottom: -12px;
       left: 0;
       height: 8px;
       width: 120px;
       }

 

Visualizza Anteprima Esempio /// Visualizza codice