用于复制徽标的CSS样式问题

Question

我正在尝试为我的徽标复制这个设计但是却在努力学习CSS。到目前为止，我已经设法编写下面的代码，但我正在努力为增长黑客和企业家创建堆叠文本。如果您有任何指导，我们将不胜感激。

<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">Elliott Davidson | <span class="logo-growth-hacker">Growth Hacker</span><br><span class="logo-entrepreneur">Entrepreneur</span></a>

.navbar-brand
  font-weight: bold
  font-size: 1rem
  text-transform: uppercase
  color: $light-grey
  padding: 30px 30px 30px 0px

.navbar-default .navbar-brand
  color: $light-grey

a.navbar-brand.navbar-brand-fix

  span.logo-growth-hacker
    font-weight: 200
    font-size: 0.5em
    text-transform: none
    vertical-align: text-top

  span.logo-entrepreneur
    font-weight: 200
    font-size: 0.5em
    text-transform: none
    margin-top: -18px
    float: inherit
    margin-left: 182px
    padding-top: 5px

Answer 1

希望这可以让你开始： - ）

＆＃13;

＆＃13;

.logo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.logo > * {
  flex: 0 0 auto;
}
.title {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.title > * {
  flex: 0 0 auto;
}

＆＃13;

<div class="logo">
  <div class="name">
    Elliott Davidson
  </div>
  <div class="title">
    <div class="funText">
      Growth Hacker
    </div>
    <div class="position">
      Entrepreneur
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我将如何做到的。相应地使用行布局和样式创建几个弹性列。

a {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #666, #666 50%, #444 50%, #444);
  color: white;
  padding: 1rem;
  text-decoration: none;
  font-size: 1.25rem;
}
.col {
  border-left: 1px solid white;
  padding: 0 0 0 1rem;
  margin: 0 0 0 1rem;
  font-size: .6rem;
}
a:hover .col { border-color: red; }

<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">
  <span class="name">Elliott Davidson</span>
  <span class="col">
    Growth Hacker<br>
    Entrepreneur
  </span>
</a>