<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <h1>Hover before/after</h1> <div class="row"> <div class="col-3 style-1"> <h2>Hover</h2> </div> <div class="col-3 style-2"> <h2>Hover</h2> </div> <div class="col-3 style-3"> <h2>Hover</h2> </div> <div class="col-3 style-4"> <h2>Hover</h2> </div> </div> </div>

body { background: #c6c6c6; } h1 { text-align: center; color: Blue; font-size: 60px; margin-bottom: 20px; } h2 { width: 100%; text-align: center; position: relative; cursor: pointer; padding-bottom: 5px; } h2:before { content: ""; position: absolute; width: 100px; height: 3px; bottom: 0; background: aqua; left: 0; transition: all 0.3s; } h2:after { content: ""; position: absolute; width: 100px; height: 3px; bottom: 0; background: aqua; right: 0; transition: all 0.3s; } h2:hover { color: blue; /*text-transform: uppercase;*/ } h2:hover:before { background: yellow; display: inline-block; left: 50px; transition: all 0.5s; } h2:hover:after { background: red; display: inline-block; right: 50px; transition: all 0.5s; }