How can I enlarge the horizontal outline of a divider in Webflow when hovered over?

To enlarge the horizontal outline of a divider in Webflow when hovered over, you will need to use custom code and some CSS properties. Here's how you can achieve this:

1. Select the divider element: Start by selecting the divider element you want to modify. You can give it a class name or target it directly using its HTML tag if there's only one divider on the page.

2. Add a hover class: Create a new class or select the existing class of the divider and add a hover state to it. This class will be applied when the user hovers over the divider.

3. Increase the width property: Inside the hover class, you need to increase the width property of the divider to make it larger when hovered over. You can use the CSS `width` property to achieve this. For example, if the default width is 2px, you can set the hover width to 4px or any value that suits your design.

4. Transition effect (optional): To make the size increase appear smoother, you can add a transition effect to the width property. Use the `transition` CSS property to define the duration and easing of the transition. For example, you can use `transition: width 0.3s ease` to make the width change with a duration of 0.3 seconds and easing effect.

Here's an example of what the CSS code would look like:

```css
.divider-class {
/* Default style */
width: 2px;
}

.divider-class:hover {
/* Enlarged size on hover */
width: 4px;
transition: width 0.3s ease; /* Optional: Add transition effect */
}
```

Remember to replace `.divider-class` with the actual class name or HTML tag of your divider element in the code.

After adding the CSS code, you'll notice that the divider increases in width when hovered over. Feel free to tweak the values to match your design requirements.