テキストホバーについて

添付の画像のようなイメージでテキストにマウスを合わせると矢印が上向きで出てくるような動きを実現したいですが、
どのようにすればいいでしょうか？　なんと調べればよいかわからず質問させていただきました。

HTMLは下記の様に考えています。

HTML
1<ul class="text_hover">
2	<li><a href="">テキスト</a></li>
3	<li><a href="">テキスト</a></li>
4	<li><a href="">テキスト</a></li>
5</ul>

css
1
2.text_hover {
3display:flex;
4border-bottom:1px solid #000;
5}
6
7.text_hover li {
8width:auto;
9}
10
11

現在ここで詰まっております。
説明下手ですいませんが教えて頂ければ助かります。
他に必要な情報などありますでしょうか？

※横並びにならなくても動きを実現できれば後はどうにか出来ると思いますので、
そこは問題ないです。

よろしくお願いします。

yambejp

2018/11/26 07:53

上向きにでる前のHTMLソースを提示下さい

yambejp

2018/11/26 08:06

ul,liで表示しているとテキストは横並びになりませんが大丈夫でしょうか？

m.ts10806

2018/11/26 08:08

ご自身が試されている現在のコードをcssも含めてご提示ください

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

回答3件

ラフに回答しますね

上向きの矢印は、CSSで実現するなら、
「CSSで三角形を２つ書いて、重ねる（ずらす）」というテクニックです。

画像を使わず、CSSで吹き出しを作る | miauler
こちらのページの

枠付きの吹き出しを作る
枠のある吹き出しの場合は、三角を2枚重ねます。

の「上向き」が参考になると思います！

これをhoverできりかえると良さそうですね

実装済みのサイトが見つかりましたら追記します。

投稿2018/11/27 02:34

編集2018/11/27 06:15

退会済みユーザー

総合スコア0

dw_sasaki

2018/11/27 06:34

回答ありがとうございました。わざわざわかりやすいリンクなど教えていただきありがとうございました。まだまだ勉強不足を感じましたので参考に学んでいこうと思います。ありがとうございました。

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

SVGで

CSS
1.text_hover li {
2  position: relative;
3  padding-bottom: 14px;
4}
5
6.text_hover li:hover::after {
7  content: url("data:image/svg+xml;charset=utf8,%3Csvg width='44' height='15' viewBox='0 0 44 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' d='M2 13 L22 0 L42 13' stroke-width='1' fill='transparent'/%3E%3C/svg%3E");
8  position: absolute;
9  bottom: -1px;
10  left: calc(50% - 22px);
11  width: 44px;
12  height: 15px;
13  background: #fff;
14}