Content

HTML & CSS
1

Hi can i ask when to use this content: “.” ? in css

2

Hi,

The simple answer is that you include it whenever you want generated content in your page and in your code above that would include a dot in your page after the content in that element.

The content property goes hand in hand with the pseudo classes :before and :after and allows you inject content into the page that is not present in the mark up. It should be used in the same manner as you would for background decoration in that you should never apply important content via the content property as it is invisible to screen readers and search engines.

However, I think your question is probably related to the clearfix hack where some people use the dot and some just use a space. The dot was needed in older gecko browsers as it wouldn’t clear properly without it and indeed even these days the dot can be useful to stop margin collapse but may introduce a slight space into the layout especially when at the bottom of the page. Read [URL=“http://www.tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asp”] Thierry’s write up for more info.

3

Thank you paul O’B, for explaining me.I will write back to you if i get some trouble on this. :slight_smile:

4

Hi Paul O’B, can i ask some help with you, I am trying to put divider in my menu using the content property.but i am having trouble can you please help me on this.


<!Doctype html>

<html lang="en">
 <html>	
 <head>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="menu4.css" style="text/css" />
   
 </head>
	


  <body>
    <ul class="nav">
           <li><a href="#">home</a></li>
	   <li><a href="#">about</a> </li>
           <li><a href="#">gallery</a> </li>
    </ul>	
 </body>

</html>






body{
    background-color: #363636;
}
.nav{
	list-style: none;	
	padding: 0;
	margin: 0;
	
	
}

ul.nav{
   min-width: 400px;
}


.nav li a:first-letter{
	text-transform: uppercase;
}

.nav  li{
	float: left;
	margin-right: 0.1em;
    min-width: 8em;

}


.nav  li:after{
    background: none repeat scroll 0 0 #626262;
    content: "";
    display: inline-block;
    height: 20px;
    margin-top: -10px;
    position: absolute;

    top: 50%;
    width: 1px;
}




.nav li a:link,
.nav li a:visited{
	text-decoration: none;	
	display: block;
	color: #606061;
}



.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

.nav ul li{
	display: none;
}

.nav li:hover  li{
  display: block; 
  text-align: justify;
  color: #34b4e3;
}


.nav li:hover li a:hover, .nav li:hover a
{
  color:#34b4e3;

}
5

#1 I dont know if it was just an error when writing this post but you have TWO opened HTML tags!!!


<html lang="en">
 <html>

Since you are using AP to position the generated dividers you need to give the PARENT LI Relative position.


.nav  li{ position:relative;}

or actually :


ul.nav  { position:relative;}

.nav  li:after{
    background: #626262;
 	 
    width: 1px;
 top:0;
bottom;
    content:"";
 

}

so that the line would be the same height as the container UL.

STILL using AP for this seems rather… troublesome.

I would suggest the following:




.nav{} /* this was redundant since  ul.nav ALSO targets your menu*/

ul.nav{
   min-width: 400px;    
   position:relative;
   list-style: none;	
   padding: 0;
   margin: 0;

}


.nav li a{text-transform: capitalize; }/* use text-transform: capitalize; that way you wont rely on the pseudo class: first letter to merely capitalize  a word*/

.nav  li{
	float: left;
	margin-right: 0.1em;

}


.nav  li:after{
    background: #626262;
 	height:20px;
 	display:inline-block;  /*inline block so that  the created :after pseudo element doesnt 'drop'*/
    width: 1px;
    content:"";
    	vertical-align:middle; /* aligns with the pseudo element, which is also inline block align middle*/

}




.nav li a:link,
.nav li a:visited{
	text-decoration: none;	
	display: inline-block;
	vertical-align:middle;
	color: #606061;
	padding-left:1em;
	    min-width: 8em;

}



.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

.nav ul li{
	display: none;
}

.nav li:hover  li{
  display: block; 
  text-align: justify;
  color: #34b4e3;
}


.nav li:hover li a:hover, .nav li:hover a
{
  color:#34b4e3;

}

Then again even this is kinda convoluted…

you could get rid of the :after pseudo element altogether and achieve the almost the same thing with:


.nav li+li { border-left:1px solid #626262}
 
.nav li a:link,
.nav li a:visited{
	text-decoration: none;	
	display:  block; /* we are back to using display: block; here */
	color: #606061;
 	min-width: 6em;
 	padding:0 1em;

}

hope that helps

6

Hi, Thank you for correcting my code,thank you also for helping me. :slight_smile: