在前端开发中，我们经常需要使用 CSS 来改变页面的外观和交互效果。其中，鼠标悬停是一种非常常见的交互效果。我们可以用 CSS 来实现一个鼠标悬停像两边展开的效果。下面是一段示例代码：

.hover-expand {
width: 150px;
height: 50px;
background-color: #3498db;
color: #ffffff;
padding: 10px;
margin: 50px auto;
position: relative;
overflow: hidden;
 }
.hover-expand:before, .hover-expand:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
background-color: #ffffff;
top: 0;
opacity: 0;
transition: all 0.3s ease;
 }
 .hover-expand:before {
left: 0;
 }
 .hover-expand:after {
right: 0;
 }
 .hover-expand:hover:before, .hover-expand:hover:after {
opacity: 0.8;
 }
 .hover-expand:hover:before {
left: -50%;
 }
 .hover-expand:hover:after {
right: -50%;
 }

解释一下上面的代码。我们首先在 CSS 中定义了一个 class 名称为 hover-expand 的 div 元素。我们在这个 div 元素中设置了一些样式，如宽度、高度、背景色、文字颜色、内外边距等。我们也将其定位为相对定位，同时设置了 overflow:hidden 属性。这是因为我们想要隐藏 div 中超出部分的内容。

下面我们定义了两个伪元素 before 和 after，它们的 content 属性为空字符串。我们将它们的宽度设置为 50%，高度设置为 100%。伪元素的背景颜色设置为白色，top 属性设置为 0。

我们也设置了伪元素的初始不透明度为 0，同时设置了一个 all 0.3s ease 的过渡效果，以便我们在后面进行展开动画时使用。在 before 中，我们将 left 属性设置为 0，在 after 中，我们将 right 属性设置为 0。

最后，我们定义了一个:hover 伪类，用于设置鼠标悬停时的样式。我们将 before 和 after 的不透明度都设置为 0.8，以便让它们逐渐显示出来。我们还设置了 before 的 left 属性为 -50%（左侧展开），设置了 after 的 right 属性为 -50%（右侧展开），以便实现鼠标悬停像两边展开的效果。

通过上面的代码，我们就可以在页面上实现一个鼠标悬停像两边展开的效果。你也可以在这段代码的基础上进行修改，尝试实现其他的鼠标悬停效果。