CSS - Как сделать вертикальную линию между словами?

Question

Помогите, пожалуйста! Нужно сделать вот такие вертикальные линии между словами в CSS, не меняя HTML. Искала в интернете, но ничего, к сожалению, не нашла..

Вот HTML код:

    <section class="section-footer">
    <ul class="ul-footer">
        <li><a href="http://www.imdb.com/jobs?ref_=ft_jb">Jobs</a></li>
        <li><a href="http://www.imdb.com/advertising/?ref_=ft_ad">Advertising</a></li>
        <li><a href="http://www.imdb.com/pressroom/?ref_=ft_pr">Press Room</a></li>
        <li><a href="https://secure.imdb.com/register-imdb/form-v2?ref_=ft_reg">Register</a></li>
        <li><a href="http://www.imdb.com/boards/?ref_=ft_mb">Message Boards</a></li>
        <li><a href="http://www.imdb.com/helpdesk/contact?ref_=ft_con">Contact Us</a></li>
        <li><a href="http://www.imdb.com/?ref_=ft_hm">Home</a></li>
    </ul>
</section>

Answer 1

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

ul li {
  padding-right: 10px;
  margin-right: 10px;
}

ul li:not(:last-of-type) {
  border-right: 1px solid black;
}

<ul>
  <li>Foo</li>
  <li>Baz</li>
  <li>Foobaz</li>
</ul>

БЛОГ НА HUSL

CSS - Как сделать вертикальную линию между словами?

Ответы (1 шт):