CSS for text with line and image on right - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

CSS for text with line and image on right

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.line {<!--from   w ww . java 2s  .  c  o m-->
   border-bottom:2px dotted Chartreuse;
   position:relative;
   height:17px;
}

.line span {
   display:inline-block;
   position:relative;
   background:white;
   bottom:-3px;
   height:100%;
   padding:0 6px;
}

.line .image {
   position:absolute;
   right:0;
}
</style> 
 </head> 
 <body> 
  <div class="line"> 
   <span> <label for="text">Lorem ipsum </label> </span> 
   <span class="image">Lorem</span> 
  </div>  
 </body>
</html>

Related Tutorials