Web Design

[AzizK]

how to create the vertical bar | sign using html and css.

[Stevie D]

how to create the vertical bar | sign using html and css.

Two answers:
1. You don't. It's a character, so you just type it.
2. whatever {border-left: 1px solid #000;}

[ralph.m]

Hi AzizK. Welcome to the forums.

As Stevie said, you can just type | (the "pipe" character) if you want to (as you did in your post). However, there are reasons not to do that (for example, as a divider between footer links). One reason I don't like the pipe character to be used in that way is that it is read out to screen reader users.

So it's nicer to use CSS styling to do it instead. So, as an example, if your footer links are contained in List Items (<li>) you could, for example, give each <li> right padding and right margin, and a right border:

.footer li {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #999;
}

.footer li:last-child {
  border: none;
}

[AzizK]

Thank you so much, Ralph

Hi AzizK. Welcome to the forums.

As Stevie said, you can just type | (the "pipe" character) if you want to (as you did in your post). However, there are reasons not to do that (for example, as a divider between footer links). One reason I don't like the pipe character to be used in that way is that it is read out to screen reader users.

So it's nicer to use CSS styling to do it instead. So, as an example, if your footer links are contained in List Items (<li>) you could, for example, give each <li> right padding and right margin, and a right border:

.footer li {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #999;
}

.footer li:last-child {
  border: none;
}