I noticed that when I test code created using bootstrap classes, there are usually many properties in CSS: after and :: before. The following is an example (from w3schools).
Can someone explain in broad terms that these additional properties are intended to be achieved, and why do they seem to appear on almost all elements?
From what I can say, they make all the excluded elements into the table elements and adding empty text space. I suppose this, if for layout purposes, but I would like to know more about the reasons he did.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Grid</h1> <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-6" style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="col-sm-6" style="background-color:pink;"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. </div> </div> </div> </body> </html>
Robin source share