下矢印を言葉の隣に配置したい

webデザイン初心者で今htmlとcssでWriteー書くためのテーマというサイトを模写しています↓
ホームとページの隣に下矢印を配置したいのですがうまく隣に配置できずこうなってしまいます↓
どうしたら文字の隣に下矢印を配置できるか教えてください。

自分が書いたhtml（bodyのみ）


<body>
  <head>
   <div class="site-titel">
     <h1>Write</h1>
     <p>書くためのテーマ</p>
   </div>
   <div class="header-left">
     <ul class="menu-bar">
         <li class="home">ホーム</li>
         <div class="arrow"></div>
         <li class="pe-zi">ページ</li>
         <li>タイポグラフィー</li>
         <div class="arrow"></div>
         <li class="contact">お問い合わせ</li>
      </ul>
      <i class="fas fa-search"></i>
     </div>
    </head>
  
</body>

自分が書いたcss


body {
  margin: 40px 60px;
}

.site-titel h1 {
  font-size: 36px;
  font-family: Georgia;
}

.site-titel p {
  font-size: 18px;
  padding-bottom: 10px;
  margin-bottom: 30px;
  color: #777;
}

.header-left li {
  float: left;
  list-style: none;
  padding: 0 16px;
}

.header-left .home {
  padding-left: 0px;
}

.header-left .contact {
  padding-right: 0px;
}

.header-left i {
  float: right;
}

.arrow {
  width: 16px;
  height: 16px;
  border: 1px solid;
  border-color: transparent transparent #565656 #565656;
  transform: rotate(-45deg);
}

kei344

2020/05/12 09:41

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、CSSはスクリーンショットを再現できる程度には提示してください。

Yorrie

2020/05/12 09:46

他のCSSに影響する可能性もありますんで、できれば現状でのCSS全部欲しいんですけど…

shu142

2020/05/12 09:50

ご指摘ありがとうございます。確かにその方がわかりやすいですよね、直してみます。

行動規範の内容に同意します

回答2件

css
1.home:after {
2 content:" ";
3position:absolute;
4width: 16px;
5height: 16px;
6border: 1px solid;
7border-color: transparent transparent #565656 #565656;
8transform: rotate(-45deg);
9}

例えばですが、arrowの代わりにこうしたら横にきます。細かい見た目はご自身で整えてください。

投稿2020/05/12 09:58

okina

総合スコア471

shu142

2020/05/13 01:46

ご回答ありがとうございます。参考にして書いてみたら正しく表示することができました。

行動規範の内容に同意します

ベストアンサー

Write – 書くためのテーマ

写経元のソースを見ました。

概要としては以下の通りです。

::afterを使っている
webフォントを使っている

該当部分のソースを抜粋コピペします。

html
1<nav id="site-navigation" class="main-navigation">
2
3<!-- 略 -->
4
5<ul id="menu-demo" class="menu">
6<li id="menu-item-2218" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-2218">
7<a href="http://demo.themegraphy.com/write-ja/">ホーム</a>
8

css
1/* 略 */ .main-navigation ul.menu > li.menu-item-has-children > a::after {
2	content: "\f431";
3	display: inline-block;
4	font: normal 16px/1 Genericons;
5	-webkit-font-smoothing: antialiased;
6	position: relative;
7	right: -8px;
8	top: 1px;
9}