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

Essere Umano che fa “cose di Computer”, laureato in Scienze Informatiche con un tentativo mediocre di Ingegneria Informatica. Interessato al graphic design, interazione uomo-macchina, user experience ed interfacce utente. Appassionato di scienza, ciclismo e fotografia. Toglietemi tutto, ma non il caffè e le mie endorfine. Dimenticavo: #terrone.