Use multiple font styles within CSS content - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL

Description

Use multiple font styles within CSS content

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit a</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
div {<!--from www  .ja va2  s  . c  om-->
   padding:2em;
   border:solid Chartreuse;
   box-sizing:border-box;
}

.floated {
   float:left;
}

.floated:after {
   content:"Bold, ";
   font-weight:bold;
   float:right;
   margin-left:.6em;
   display:block;
}

.floated:before {
   content:'Italic';
   font-style:italic;
   float:right;
   margin-left:.6em;
   display:block;
}

.flexboxed {
   width:100%;
   clear:both;
   display:flex;
}

.flexboxed:before {
   content:"Bold, ";
   font-weight:bold;
   margin-left:.6em;
   order:2;
}

.flexboxed:after {
   content:'Italic';
   font-style:italic;
   margin-left:.6em;
   order:3;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="floated">
    Lorem ipsum do 
  </div> 
  <div class="flexboxed">
    Lorem ipsum dolo 
  </div>  
 </body>
</html>

Related Tutorials