两个div文字切换,添加过渡效果,下边有划线

要在HTML和CSS中创建一个两个`<div>`之间文字切换并带有过渡效果及下划线，可以这样做：

首先，在HTML部分，设置两个`<div>`，并给它们分别赋予不同的id，比如`div1`和`div2`，以及一个用于显示下划线的`<hr>`元素：

<div id="div1" class="switchable">
  <p>文本1</p>
</div>
<div id="div2" class="switchable hidden">
  <p>文本2</p>
</div>
<hr class="underline">

然后，在CSS部分，添加样式，包括基本布局、过渡效果、隐藏第二个`<div>`和下划线样式：

.switchable {
  display: inline-block;
  position: relative;
  transition: opacity 0.5s ease; /* 设置切换动画效果 */
}

.hidden {
  opacity: 0; /* 隐藏第二个div */
}

#div1 p,
#div2 p {
  white-space: nowrap; /* 防止换行 */
}

#div2 {
  display: none;
}

.underline {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc; /* 可自定义颜色 */
}

为了实现文字的切换，你可以使用JavaScript或者jQuery来控制这两个`<div>`的显示和隐藏：

function toggleDivs() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  
  if (div1.classList.contains('hidden')) {
    div1.classList.remove('hidden');
    div2.classList.add('hidden');
  } else {
    div1.classList.add('hidden');
    div2.classList.remove('hidden');
  }
}

// 初始化并绑定事件
toggleDivs();
setInterval(toggleDivs, 2000); // 每隔2秒切换一次，可根据需求调整时间

现在，每次调用`toggleDivs`函数，就会切换两个`<div>`的内容，并且有平滑的过渡效果。`.underline`会始终出现在当前可见的`<div>`下方。