html5触碰文字下方显示蓝色条

html5如何做出这样的效果？

触碰文字后，下方显示蓝色条，离开不显示。
（能不能分成两个组件）

使用hover和transition

```html
<div className="demoCss">
    <p>你好</p>
    <div></div>
</div>

.demoCss {
    color: white;
    width: 100px;
}
.demoCss p {
    margin-bottom: 0px;
}
.demoCss div {
    background-color: white;
    height: 2px;
    width: 0px;
}
.demoCss:hover div {
    width: 100px;
    background-color: white;
    transition: width 0.5s;
    margin:10px auto 0;
}

```

给你的css加个样式即可

.div1{
    border-bottom:0px;
}
.div1:hover {
    border-bottom:2px solod blue;
}

鼠标滑入和滑出事件

css
hover写鼠标经过出线底部边框。
动画写边框出现的动作