Аdd矢印は、それはホバー項目

Question

私は、このドロップダウンメニューを実装していますを示すために、ドロップダウンをАします。私はコンテンツを使ってみました。ここでは、コード

/* Dropdown Button */ 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    content: ' ▾'; 
 
    cursor: pointer; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
/* Links inside the dropdown */ 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
/* Change color of dropdown links on hover */ 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
/* Show the dropdown menu on hover */ 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    </div> 
 
</div>

私は .dropbtnクラスに content: ' ▾'を追加しましたが、それは動作しませんでしたです。

Answer 1

コードに問題がある場合は、別の方法でcontentを使用する必要があります。まず、誤解を招く古いコンテンツが含まれているWebサイトW3Schoolsに従った結果です。ベストプラクティス、ウェブサイトからのあなたの理解。素晴らしいCSSウェブサイトCSS Tricksからコンテンツを取る

、それは言う：

CSSがcontentと呼ばれる性質を持っています。擬似要素:afterと:beforeとのみ使用できます。擬似セレクタ（コロン）付きのように書かれていますが、ページ上に存在するものを実際に選択するのではなく、ページに新しいものを追加しているわけではないので、擬似要素と呼ばれています。

ですから、擬似コードの使用を行う必要があります。

/* Dropdown Button */ 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
.dropbtn:after { 
 
    content: ' ▾'; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 10px; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
/* Links inside the dropdown */ 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
/* Change color of dropdown links on hover */ 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
/* Show the dropdown menu on hover */ 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    </div> 
 
</div>

プレビュー：