Jump to content

How to replace text by css


newcoder1010
 Share

Recommended Posts

CSS is unaware of the content that's on your page.

 

Make your structure like this instead:

<table class="socialmedia"> 
  <tr>
    <td><a class="facebook" href="http://www.facebook.com/davis"> F</a></td> 
    <td><a class="twitter" href="http://www.twitter.com/davis">T </a></td>
  </tr>
</table>

Then your CSS can target the elements with .socialmedia .facebook and .socialmedia .twitter selectors.

Link to comment
Share on other sites

I deleted your table, but maybe something like this...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<style> 
.socialmedia{
width:200px;
border:1px solid #ddd;
}
.facebook,.twitter{
display:inline-block;
height:40px;
width:40px;
border-radius:20px;
background-color:#06c;
vertical-align:middle;
text-align:center;
}
.twitter{
background-color: #50d;
}
.facebook a,.twitter a{
color:#000;
font-weight:bold;
text-decoration:none;
vertical-align:middle;
line-height:40px
}
</style>
</head>

<body>


<h2>Text</h2>
<div class="socialmedia"> 
<span class="facebook"><a href="http://www.facebook.com/davis">F</a></span>
<span class="twitter"><a href="http://www.twitter.com/davis">T</a></span>
</div>

</body>
</html>
Link to comment
Share on other sites


<!DOCTYPE html>

<html>

<head>

<style>

.socialmedia a {

display: inline-block;

 

padding: 10px;

 

width: 20px;

height: 20px;

border-radius: 20px;

color: #fff;

text-decoration: none;

text-align: center;

line-height: 20px;

}

 

.socialmedia a[href*='twitter'] {background: skyblue; }

.socialmedia a[href*='facebook'] {background: blue; }

</style>

</head>

<body>

<table class="socialmedia">

<tr>

<td><a href="http://www.facebook.com/davis">F</a></td>

<td><a href="http://www.twitter.com/davis">T</a></td></tr></table></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Adding text through css instead of html

 

<!DOCTYPE html>
<html>
<head>
<style> 
.socialmedia a {
display: inline-block;
    font-weight: bold;
    padding: 10px;
    
    width: 20px;
height: 20px;
    border-radius: 20px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 20px;
}
.socialmedia a[href*='twitter']:before {content:"T";}
.socialmedia a[href*='twitter'] {background: skyblue; }
.socialmedia a[href*='facebook']:before {content:"F"; }
.socialmedia a[href*='facebook'] {background: blue; }
</style>
</head>
<body>

<table class="socialmedia"> 
  <tr>
    <td><a href="http://www.facebook.com/davis"></a></td> 
    <td><a href="http://www.twitter.com/davis"></a></td></tr></table></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...