CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12527

Putting a border on a link with CSS

I am trying to put a bottom border on my link but despite using code pretty much straight from the internet it doesnt seem to want to work.

http://codepen.io/anon/pen/oeLqc

lll {
  font-weight:normal;
  margin-bottom:5px;
  border-bottom: 3px solid blue;
  background: #EEE;
  display: table;
}

If I wanted a thick border on the bottom of my links, how should I be doing it?

Upvotes: 0

Views: 174

Answers (4)

Sid M
Sid M

Reputation: 4364

You forgot to use dot(.) before writing the css. It should be like

.lll {
  font-weight:normal;
  margin-bottom:5px;
  border-bottom: 3px solid blue;
  background: #EEE;
  display: table;
}

Upvotes: 1

lukeseager
lukeseager

Reputation: 2615

The selector lll wont work as is.

  • If your class is lll then your code needs to be .lll
  • If it's an ID then it needs to be #lll

Also, is there a reason you're using display: table? That probably isn't helping your link. Maybe try display: inline-block instead? Obviously without knowing the site you're working on it's hard to say.

But changing those two things will definitely help!

Upvotes: 2

Curtis
Curtis

Reputation: 103428

When declaring class selectors in CSS, they must start with .:

.lll {
  font-weight:normal;
  margin-bottom:5px;
  border-bottom: 3px solid blue;
  background: #EEE;
  display: table;
}

http://codepen.io/anon/pen/hwsak

Here is a useful article on CSS selectors:

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Upvotes: 2

Ollie
Ollie

Reputation: 656

You missed a class assignment try:

.lll {
 font-weight:normal;
 margin-bottom:5px;
 border-bottom: 3px solid blue;
 background: #EEE;
 display: table;
}

Upvotes: 1

Related Questions