Limitare 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.

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

Cosa ne pensi? Dimmelo su Twitter @_domenicomonaco oppure su Linkedin linkedin.com/in/domenicomonaco

This work by Domenico Monaco is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International