使用纯CSS来实现左右拉伸拖动的功能是比较困难的，因为CSS主要用于样式和布局，而不是交互。左右拉伸拖动这样的交互功能通常需要使用JavaScript或jQuery等脚本语言来实现。
然而，你可以使用CSS的:hover、:active等伪类以及HTML的draggable属性来创建一些基本的交互效果，但这些并不足以实现复杂的拖动和拉伸功能。
如果你坚持要使用纯CSS来实现类似的效果，可以考虑使用CSS的resize属性。这个属性允许用户通过拖动元素右下角来改变元素的大小。但请注意，这并不是真正的“拖动”功能，而只是允许用户调整元素的大小。
下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid;padding: 20px; width: 200px;resize: horizontal; /* 允许用户水平调整元素大小 */overflow: auto; /* 防止内容溢出 */
}
</style>
</head>
<body><div>你可以尝试拖动我右下角的小三角来改变我的宽度。
</div></body>
</html>
在这个例子中，resize: horizontal;属性允许用户通过拖动元素右下角的三角形来改变元素的宽度。但请注意，这种方法的功能非常有限，并不能实现真正的“左右拉伸拖动”效果。
如果你需要更复杂的拖动和拉伸功能，我强烈建议使用JavaScript或jQuery等脚本语言来实现。这些语言提供了更强大和灵活的交互功能，可以满足你的需求。例如，你可以使用jQuery的draggable和resizable插件来实现拖动和调整大小的功能。
